<template>
	<div>
		<el-card class="left-box">
        <div class="left-top-bpx">
          <div>
            <!-- <el-avatar style="margin-right: 10px;cursor :pointer;" icon="el-icon-user-solid" :size="50"></el-avatar>     -->
          <el-avatar style="margin-right: 10px;cursor :pointer;" :src="user.avatarUrl" :size="50" icon="el-icon-user-solid"></el-avatar>
            
          </div>
          <span  class="user-name">{{username}}</span>      
        </div>
        <div class="left-bottom-box">
          <ul>
            <li style="cursor :pointer;" v-for="item in guanzhu" :key="item.id">
              <span>{{ item.num }}</span>
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </el-card>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2Sculpture',

	data() {
		return {
			username:'遇事不决蔡徐坤！',
      guanzhu:[
        {
          id:1,
          num:2,
          name:'关注'
        },
        {
          id:2,
          num:0,
          name:'粉丝'
        },
        {
          id:3,
          num:1,
          name:'动态'
        },
      ],
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):null,

		};
	},

	mounted() {
		
	},

	methods: {
		
	},
};
</script>

<style lang="less" scoped>

.left-box{
      width: 260px;
      height: 150px;
      // background-color: red;
      border-radius: 15px;
      display: flex;
      // justify-content: center;
      align-items: center;
      .left-top-bpx{
        width: 100%;
        height: 75px;
        // background-color: red;
        padding: 0;
        display: flex;
        justify-content: space-around;
        .el-card__body{
        width: 60px;
        height: 60px;
      }
      }
    }
		.left-bottom-box{
      width: 210px;
      ul{
        display: flex;
        justify-content: space-around;
        li{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .user-name{
      line-height: 50px;
      cursor :pointer;
    }
    .user-name:hover{
      color: #409eff;
    }
</style>